/*
* @Author: Seven
* @Date:   2018-05-06 19:27:01
* @Last Modified by:   Seven
* @Last Modified time: 2018-05-10 16:13:25
*/

/* 公共属性 */
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #f9f9f9;
}
html{
	font-family: "华文行楷";
}
/* 去除横向滚动条 */
html,body{
	overflow:hidden;
	overflow-y:auto;
}
h1{
	font-size: 0.20rem;
}
p{
	font-size: 0.12rem;
}
input{
	outline-style: none;
}
textarea{
	outline-style: none;
}

/* 背景 */
.content{
	display: none;
	width: 3.75rem;
	height: 6.67rem;
	background-size: 3.75rem 6.67rem;	
}
#content1{
	background-image: url('./images/1/content1-bg.jpg');
	display: block;
}
#content2{
	background-image: url('./images/2/content2-bg.jpg');
	display: none;
}
#content3{
	background-image: url('./images/5/content3-bg.jpg');
	display: none;
}
#content4{
	background-image: url('./images/4/content4-bg.jpg');
	display: none;
}

/* 第一页 */
.content1{

}

/* 第二页 */
.content2{

}
.content2 .in{
	width: 1.6rem;
	height: 1.8rem;
	position: relative;
	padding: 2rem 0 2rem 1rem;
}
.content2 .in .btn-in{
	position: absolute;
	display: block;
	width: 1.6rem;
	height: 1.8rem;
}
.content2 .in .text{
	font-family: "华文行楷";
	font-size: .32rem;
	color: #f9f9f9;
	position: absolute;
	top: 2.7rem;
	left: 1.3rem;
}

/* 第三页 */
.content3 .main{
	width: 2.5rem;
	height: 4.5rem;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	position: relative;
	top: .4rem;
}
.content3 .names{
	height: 1.2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.content3 .names p{
	margin: .15rem 0 .08rem 0;
	font-size: .17rem;
}
.content3 .names input{
	display: block;
	width: .8rem;
	height: .3rem;
}
.content3 .names .hisName-input{
	background: url('images/3/input.png');
	background-size: .8rem .3rem;
}
.content3 .names .yourName-input{
	background: url('images/3/input.png');
	background-size: .8rem .3rem;
}
.content3 .text{
	/*border: 1px solid yellow;*/
}
.content3 .text p{
	font-size: .18rem;
	margin-top: .05rem;
}
.content3 .text .text-input{
	position: relative;
	display: block;
	width: 2.37rem;
	height: 2.2rem;
	border: none;
	margin: .05rem 0 .1rem 0;
	padding: .05rem;
	z-index: 3;
}
.content3 .text .text-input-img{
	width: 2.52rem;
    height: 2.32rem;
    position: absolute;
    top: 1.23rem;
    left: -.02rem;
    z-index: 2;
}
.content3 .btns{
	height: 1.1rem;
	display: flex;
	flex-direction: row;
}
.content3 .change{
	font-size: .14rem;
	margin-right: .15rem;
	text-align: center;
	height: .3rem;
	line-height: .3rem;
	color: #666;
}
.content3 .preview{
	width: 1rem;
	height: .3rem;
	line-height: .3rem;
	background: url('images/3/content3-btn.png');
	background-size: 1rem .3rem;
	font-size: .26rem;
	text-align: center;
	color: #fff;
}
.content4 .main{
	font-family: "微软雅黑";
	font-size: .18rem;
	width: 2.5rem;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
    top: .6rem;
}
.content4 .main .share{
	width: 2.5rem;
	height: 3.2rem;
	background: url('images/4/textarea.png');
	background-size: 2.5rem 3.2rem;
}
.content4 .main .hisName{
	padding-left: .15rem;
	text-align: left;
	font-family: "华文新魏";
}
.content4 .main .words{
	height: 2.4rem;
	overflow: hidden;
	font-size: .14rem;
	text-align: center;
	padding: .1rem .16rem;
	/* 字体渐变 */
	background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 1)), to(rgba(255,255,255, 1)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.content4 .main .yourName{
	padding-right: .15rem;
	text-align: right;
	font-family: "华文新魏";
}
/* 按钮的通用样式 */
.content4 .main .btns div{
	width: 1.4rem;
	height: .38rem;
	line-height: .38rem;
	margin: .12rem auto;
	text-align: center;
	color: #f9f9f9;
	font-size: .24rem;
}
.content4 .main .share-btn{
	background: url('images/4/share-btn.png');
	background-size: 1.4rem .38rem;
}
.content4 .main .wantPlay{
	background: url('images/4/wantPlay.png');
	background-size: 1.4rem .38rem;
	margin: .1rem auto;
	position: relative;
	top: -0.52rem;
}

/* 分享插件演示 */
#nativeShare{
	opacity: 0;
	width: 1.4rem;
    height: .38rem;
	position: relative;
	top: -.5rem;
	left: -.06rem;
	z-index: 999;
}




















/* 媒体查询自适应 */
@media only screen and (max-width: 375px){
    html { font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
}
@media only screen and (min-width: 376px) and (max-width: 480px) {
    html { font-size: 732.4%; }
}
@media only screen and (min-width: 481px) and (max-width: 540px) {
    html { font-size: 750%; }
}
@media only screen and (min-width: 541px) and (max-width: 768px) {
    html { font-size: 781.25%; }
}
@media only screen and (min-width: 769px) and (max-width: 920px) {
    html { font-size: 808.6%; }
}
@media only screen and (min-width: 921px) {
    html { font-size: 843.75%; }
}


